<div class="panel panel-default panel-small">
    <div class="panel-heading">
        <a  class="btn btn-xs dark pull-right" @click.stop="$emit('remove',index)"><i class="fa fa-minus"></i></a>
        <h4 class="panel-title">{{Kooboo.text.validationRule[item.type]}}</h4>
    </div>
    <div class="panel-body" :id="'validation_panel_' + index">
        <div class="form-group" v-if="['stringLength','range'].includes(item.type)">
            <div class="input-group">
                <div>
                    <input v-model="item.min"
                           v-kb-hint:left="{msg:validateModel.min.msg,show:showValidateError}"
                           type="number" min="0" class="form-control" placeholder="Minimal value"/>
                </div>
                <span class="input-group-addon">-</span>

                <div>
                    <input v-kb-hint="{msg:validateModel.max.msg,show:showValidateError}"
                           v-model="item.max" type="number" class="form-control" placeholder="Maximum value"/>
                </div>

            </div>
        </div>
        <div    v-if="['min','minLength','minChecked'].includes(item.type)"
                class="form-group" >
            <input v-kb-hint="{msg:validateModel.value.msg,show:showValidateError}" v-model="item.value" type="number" class="form-control" placeholder="Minimal value"/>
        </div>
        <div v-if="['max','maxLength','maxChecked'].includes(item.type)"
                class="form-group" >
            <input v-kb-hint="{msg:validateModel.value.msg,show:showValidateError}" v-model="item.value" type="number" class="form-control" placeholder="Maximum value"/>
        </div>
        <div  v-if="item.type ==='regex'"
                class="form-group" >
            <input v-kb-hint="{msg:validateModel.pattern.msg,show:showValidateError}" v-model="item.pattern"
                   type="text"
                   class="form-control"
                   placeholder="Pattern"/>
        </div>
        <div class="form-group">
            <p>{{Kooboo.text.component.fieldEditor.errorMsgHint}}</p>
            <input type="text"
                   v-model="item.msg"
                   :placeholder="Kooboo.text.component.fieldEditor.errorMsg"
                   class="form-control">
        </div>
    </div>
</div>
